<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/index.css">
    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="font/css/font-awesome.min.css"> -->
  </head>
  <body>
    <!-- 导航栏 -->
    <div class="openxy_nav">
    	<img src="img/logo_green.png" alt="openxy">
    	<img src="img/openxy_1.png" alt="openxy">
    	<ul class="nav nav-pills">
		  <li class="nav-item openxy_item">
		    <a class="nav-link openxy_item_no_img" href="#">首页
		    <!-- <img src="img/down.png" alt="point"> -->
			</a>
		  </li>
		  <li class="nav-item openxy_item">
		    <a class="nav-link" href="#">学习资源
		    <img src="img/down.png" alt="point">
		    </a>
		  </li>
		  <li class="nav-item openxy_item">
		    <a class="nav-link" href="#">学习资源
		    <img src="img/down.png" alt="point">
		    </a>
		  </li>
		  <li class="nav-item openxy_item">
		    <a class="nav-link" href="#">学习资源
		    <img src="img/down.png" alt="point">
		    </a>
		  </li>
		  <img src="img/user_1.png" alt="point">
		</ul>
    </div>
	<!-- 轮播图 -->
	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
	  <ol class="carousel-indicators">
	    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
	    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
	    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
	  </ol>
	  <div class="carousel-inner">
	    <div class="carousel-item active">
	      <img class="d-block w-100" src="img/pic.jpg" alt="First slide">
	      <div class="carousel-caption d-none d-md-block openxy_carousel_caption">
		    <h3>新一代在线学习平台</h3>
		    <h3>敬请期待！</h3>
		  </div>
	    </div>
	    <div class="carousel-item">
	      <img class="d-block w-100" src="img/pic.jpg" alt="Second slide">
	      <div class="carousel-caption d-none d-md-block openxy_carousel_caption">
		    <h3>新一代在线学习平台</h3>
		    <h3>敬请期待！</h3>
		  </div>
	    </div>
	    <div class="carousel-item">
	      <img class="d-block w-100" src="img/pic.jpg" alt="Third slide">
	      <div class="carousel-caption d-none d-md-block openxy_carousel_caption">
		    <h3>新一代在线学习平台</h3>
		    <h3>敬请期待！</h3>
		  </div>
	    </div>
	  </div>
	  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
	    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
	    <span class="carousel-control-next-icon" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>

	<!-- 过渡栏 -->
	<div id="transition">
		<img src="img/opensource.png" alt="opensource" class="openxy_img_left">
		<img src="img/idea.png" alt="idea">
		<img src="img/openmind.png" alt="opensource" class="openxy_img_right">
	</div>	

	<!-- 内容 -->
	<div id="content" class="container-fluid">
		<!-- 最受欢迎 -->
		<div id="most_like" class="openxy_class">
			<div class="openxy_class_title">
				最受欢迎
			</div>
			<!-- 课程图片 -->
			<div class="openxy_class_info">
				<div class="card-deck">
				  <div class="card">
				    <img class="card-img-top" src="img/class_pic.png" alt="class_pic">
				    <div class="card-body">
				      <h4 class="card-title">软件项目管理</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>

				  <div class="card">
				    <img class="card-img-top" src="img/class_pic1.jpg" alt="class_pic1">
				    <div class="card-body">
				      <h4 class="card-title">数据结构</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>

				  <div class="card">
				    <img class="card-img-top" src="img/class_pic2.png" alt="class_pic2">
				    <div class="card-body">
				      <h4 class="card-title">JAVA程序设计</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>
				  
			  	</div>
			</div>
		</div>

		<!-- 过渡 -->
		<img src="img/next.png" alt="next">

		<!-- 推荐课程 -->
		<div id="recommend" class="openxy_class">
			<div class="openxy_class_title">推荐课程</div>
			<!-- 课程图片 -->
			<div class="openxy_class_info">
				<div class="card-deck">
				  <div class="card">
				    <img class="card-img-top" src="img/class_pic.png" alt="class_pic">
				    <div class="card-body">
				      <h4 class="card-title">软件项目管理</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>

				  <div class="card">
				    <img class="card-img-top" src="img/class_pic1.jpg" alt="class_pic1">
				    <div class="card-body">
				      <h4 class="card-title">数据结构</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>

				  <div class="card">
				    <img class="card-img-top" src="img/class_pic2.png" alt="class_pic2">
				    <div class="card-body">
				      <h4 class="card-title">JAVA程序设计</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>
				  
			  	</div>

			  	<!-- 第二行 -->
			  	<div class="card-deck">
				  <div class="card">
				    <img class="card-img-top" src="img/class_pic.png" alt="class_pic">
				    <div class="card-body">
				      <h4 class="card-title">软件项目管理</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>

				  <div class="card">
				    <img class="card-img-top" src="img/class_pic1.jpg" alt="class_pic1">
				    <div class="card-body">
				      <h4 class="card-title">数据结构</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>

				  <div class="card">
				    <img class="card-img-top" src="img/class_pic2.png" alt="class_pic2">
				    <div class="card-body">
				      <h4 class="card-title">JAVA程序设计</h4>
				      <p class="card-text">可选的课程介绍</p>
				      <a href="#" class="card-link openxy_card_left">
				      	By:balabala
    					</a>
    					<a href="#" class="card-link openxy_card_right">    	
    						<img src="img/pen.png" alt="学习人数">1234567
    					</a>
				    </div>
				  </div>
				  
			  	</div>
			</div>
		</div>			
	</div>

	<div ><img id="replace" src="img/replace.png" alt="replace"></div>

	<div id="footer">
		<img src="img/logo_green.png" alt="openxy">
		<img src="img/openxy_1.png" alt="openxy">
		<div class="openxy_intro">
			<p>
			openxy是基于balabala理念，以培养学生能力为目标的院校交互式翻转课堂教学平台。对于普通用户，玩课可以提供各类优秀课程供学习。对于签约学校的师生，玩课以线上微课教学和线下课堂互动相结合，将线上学习纳入教学考评体系，实现师生实时互动，课程测验，分数考评，个性化学习体验等全系列课程运营服务.
			</p>
			<ul>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">帮助中心</a></li>
				<li><a href="#">合作伙伴</a></li>
			</ul>
			<div>关注我们：<a><img src="img/wechat.png" alt="wechat.png"></a></div>
		</div>	
		<div class="openxy_copyright">
			Copyright © xxxx-xxxx 杭州balabala公司 all rights reserved 浙balabala
		</div>
	</div>	
    
  </body>

  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <script type="text/javascript">
    	$('.carousel').carousel();

//     	window.onload=function  () {
//         var oDiv =$('#content').clientHeight;
//         alert(oDiv);
//         var oDiv2 =$('#replace img');
//         oDiv2.css("clientHeight",oDiv);
// }//结果也是200

	window.onload=function  () {
        var oDiv =document.getElementById('content');
        // alert( oDiv.clientHeight)//200
        var img =document.getElementById('replace');
        img.height=oDiv.clientHeight;
    }
    </script>
</html>